<template>
  <div class="line">
    <div ref="el" :style="{width: computedCanvasWidth + 'px', height: computedCanvasHeight + 'px'}"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'LineChart',
  props: {
    canvasWidth: {
      type: Number,
      default: 300
    },
    canvasHeight: {
      type: Number,
      default: 150
    },
    list: {
      /**
       * {
       *   color: '#xxx',
       *   name: '已处理',
       *   data: {
       *     '6月': 100,
       *     '7月': 12,
       *   }
       * }
       */
      type: Array,
      default: () => []
    }
  },
  data () {
    return {}
  },
  watch: {
    list () {
      this.initChart()
    }
  },
  computed: {
    computedCanvasWidth () {
      return this.$base * this.canvasWidth
    },
    computedCanvasHeight () {
      return this.$base * this.canvasHeight
    },
    xAxis () {
      const ret = []
      this.list.forEach(item => {
        const keys = Object.keys(item.data)
        keys.forEach(key => {
          if (ret.indexOf(key) === -1) {
            ret.push(key)
          }
        })
      })

      return ret.sort()
    }
  },
  mounted () {
    this.initChart()
  },
  methods: {
    initChart () {
      const xAxis = this.xAxis
      const series = this.list.map(item => {
        return {
          name: item.name,
          type: 'line',
          data: xAxis.map(x => {
            return item.data[x] || 0
          }),
          lineStyle: {
            width: this.$base * 5,
            color: '#4AF1FF'
          },
          symbolSize: this.$base * 6
        }
      })

      const option = {
        tooltip: {
          trigger: 'axis',
          show: true,
          textStyle: {
            fontSize: this.$base * 14
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          top: '60',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          axisLabel: {
            color: '#fff',
            fontSize: this.$base * 12,
            margin: this.$base * 8
          },
          data: this.xAxis,
          axisLine: {
            show: false
          }
        },
        yAxis: {
          scale: true,
          name: '万/元',
          nameTextStyle: {
            color: '#fff',
            fontSize: this.$base * 12,
            padding: [0, 0, this.$base * 8, this.$base * 8]
          },
          type: 'value',
          splitNumber: 6,
          min: 0.5,
          max: 3,
          // minInterval: 0.5,
          splitLine: {
            show: false
          },
          axisLabel: {
            color: '#fff',
            fontSize: this.$base * 12,
            margin: this.$base * 8
          }
        },
        series: series
      }

      if (!this.instance) {
        this.instance = echarts.init(this.$refs.el)
      }
      this.instance.setOption(option)
    }
  }
}
</script>

<style lang="scss">
.line {
  width: 100%;
  height: 100%;
}
</style>